<template>
    <div class="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li v-for="(item, index) in images"
                    data-target="#carousel-example-generic"
                    :data-slide-to="index"
                    :class="{'active': item.isActive}"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div v-for="(item, index) in images" :class="{'item': true, 'active': item.isActive}">
                    <a :href="item.href" target="_blank"><img :src="item.src" alt="..." class="bannerImg"></a>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                images: [
                    {
                        href: "www.baidu.com",
                        src: require("../assets/icon/banner/banner1.png"),
                        alt: "",
                        isActive: true
                    },{
                        href: "javascript:void(0);",
                        src: require("../assets/icon/banner/banner2.png"),
                        alt: "",
                        isActive: false
                    },{
                        href: "javascript:void(0);",
                        src: require("../assets/icon/banner/banner3.png"),
                        alt: "",
                        isActive: false
                    },
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .carousel-indicators {
        bottom: 115px;
        width: 48%;
        text-align: right;
        li {
            width: 8px;
            height: 8px;
            border: none;
            background-color: rgba(0,0,0,.2);
            margin-right: 8px;

            &.active{
                width: 8px;
                height: 8px;
                margin-bottom: 1px;
                border: none;
                background-color: #007aff;
            }
        }
    }

    .bannerImg {
        /*display: block;*/
        height: 500px!important;
    }
</style>
